<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <!--{include file="comm_header.tpl"}-->
</head>

<body ontouchstart style="background: #ebebeb;">
<div id="container">
<!--{if $errMsg}-->
    <div style="padding: 20px 0; font-size: 3.8vw; text-align: center; color: #021b4d" ><!--{$errMsg}--></div>
<!--{else}-->
    <div class="page" style="margin-bottom: 45px">
        <!--details-->
        <div class="weui-form-preview" style="margin-top: 0">
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">报价单号：</span><!--{$tempInfo->tempCode}--></label>
                    <span class="weui-form-preview__value"><span class="text-gray">要求完成时间：</span><!--{$tempInfo->requestDate}--></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">项目名称：</span><!--{$tempInfo->tempName}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">涂装体系：</span><!--{$tempInfo->categoryName}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">施工面积：</span><!--{$tempInfo->area}-->平米</label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item weui_describe">
                    <label class="weui-form-preview__label"><span class="text-gray">制作内容：<br>及要求&nbsp;</span></label>
                    <p><!--{$tempInfo->request}--></p>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">物流方式：</span><!--{$tempInfo->sendTypeName}-->，<!--{$tempInfo->expressNum}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">收&ensp;货&ensp;人：</span><!--{$tempInfo->receiver}-->，<!--{$tempInfo->receivMobile}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item weui_describe">
                    <label class="weui-form-preview__label"><span class="text-gray">地&emsp;&emsp;址：</span></label>
                    <p><!--{$tempInfo->provinceName}--><!--{$tempInfo->cityName}--><!--{$tempInfo->countyName}--><!--{$tempInfo->address}--></p>
                </div>
            </div>
            <!--{if $user['type'] == 0 || $user['type'] == 2}-->
            <div class="weui-form-preview__ft">
                <div class="flex-box">
                    <div class="weui-flex flow-box">
                        <div class="weui-flex__item <!--{if $tempInfo->tempStatus >0}-->weui-flex__item_on<!--{/if}-->"><i class="icon iconfont icon-pickup"></i><p>已审核</p></div>
                        <div class="weui-flex__item"><i class="icon iconfont icon-line"></i></div>
                        <div class="weui-flex__item <!--{if $tempInfo->tempStatus >1}-->weui-flex__item_on<!--{/if}-->"><i class="icon iconfont icon-making"></i><p>制作</p></div>
                        <div class="weui-flex__item"><i class="icon iconfont icon-line"></i></div>
                        <div class="weui-flex__item <!--{if $tempInfo->tempStatus >3}-->weui-flex__item_on<!--{/if}-->"><i class="icon iconfont icon-transport"></i><p>发货</p></div>
                        <div class="weui-flex__item"><i class="icon iconfont icon-line"></i></div>
                        <div class="weui-flex__item <!--{if $tempInfo->tempStatus ==5}-->weui-flex__item_on<!--{/if}-->"><i class="icon iconfont icon-ok1"></i><p>收货</p></div>
                    </div>
                </div>
            </div>
            <!--{/if}-->
        </div>

        <!--list-->
        <!--{if isset($tempInfo->dtl)}-->
        <!--{foreach from=$tempInfo->dtl item=tempDtl}-->
        <div class="weui-form-preview weui-details-list">
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-blue">产品系列：<!--{$tempDtl->categoryName}--></span></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">颜色：</span><!--{$tempDtl->color}--></label>
                    <span class="weui-form-preview__value"><span class="text-gray">对色标准：</span><!--{$tempDtl->colorDis}--></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">制作内容：</span><!--{$tempDtl->make}--></label>
                    <span class="weui-form-preview__value"><span class="text-gray">规格：</span><!--{$tempDtl->spec}--></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">数量：</span><!--{$tempDtl->amount}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">效果：</span><!--{$tempDtl->effect}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">备注：</span><!--{$tempDtl->remark}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
            </div>

            <!--{if $user['type'] == 1 && $tempInfo->tempStatus > 1}-->
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell" style="padding-left: 30px;">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title">图片上传</p>
                                <div class="weui-uploader__info">0/2</div>
                            </div>
                            <div class="weui-uploader__bd" name="uploader" gId="<!--{$tempDtl->goodsId}-->">
                                <ul class="weui-uploader__files">
                                    <!--{if isset($tempDtl->annex)}-->
                                    <!--{foreach from=$tempDtl->annex item=file}-->
                                    <li class="weui-uploader__file">
                                        <img style="width: 79px;height: 79px;" src="<!--{$file->path}-->" />
                                        <!--{if $tempInfo->tempStatus == 2}-->
                                        <del num="<!--{$file->annexId}-->">&times;</del>
                                        <!--{/if}-->
                                    </li>
                                    <!--{/foreach}-->
                                    <!--{/if}-->
                                </ul>
                                <!--{if $tempInfo->tempStatus == 2}-->
                                <div class="weui-uploader__input-box">
                                    <input class="weui-uploader__input" type="button" />
                                </div>
                                <!--{/if}-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--{/if}-->

        </div>
        <!--{/foreach}-->
        <!--{/if}-->
        <!--list END-->
    </div>
    <div class="weui-footer weui-footer_fixed-bottom">
        <!--{if $user['type'] == 0 || $user['type'] == 2}-->
            <a href="tel:0573-86773577" class="weui-btn weui-btn_primary">联系客服</a>
            <!--{if $tempInfo->tempStatus == 4 && $user['type'] == 0}-->
            <a href="javascript:receipt();" class="weui-btn weui-btn_warn">确认收货</a>
            <!--{/if}-->
        <!--{elseif $user['type']==1 && $tempInfo->tempStatus == 1 }-->
        <a href="javascript:claim();" class="weui-btn weui-btn_warn">我要认领</a>
        <!--{elseif $user['type']==1 && $tempInfo->tempStatus == 2 }-->
        <a href="javascript:finish();" class="weui-btn weui-btn_primary">制作完成</a>
        <!--{/if}-->
    </div>
<!--{/if}-->

</div>

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!--{include file="comm_js.tpl"}-->
<script>
    var num = 0, data = {};
    wx.config({
        debug: false,
        appId: '<!--{$signPackage["appId"]}-->',
        timestamp: <!--{$signPackage["timestamp"]}-->,
        nonceStr: '<!--{$signPackage["nonceStr"]}-->',
        signature: '<!--{$signPackage["signature"]}-->',
        jsApiList: [
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage'
        ]
    });
    wx.ready(function(){

        //上传选择图片
        $('div[name=uploader]').on('click', 'input[type=button]', function () {
            var _this = this,
                _ul =  $(_this).parent().prev(),
                _div = $(this).parents('div[name=uploader]'),
                gId = _div.attr('gId');

                wx.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],   // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'],        // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        if(_ul.find('li').length == 5){
                            E.wxAlert('每个系列只能上产5张图片');
                            return;
                        }

                        if(!data[gId]) data[gId] = {};

                        //返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        var localIds = res.localIds;
                        $.each(localIds, function(i,v) {
                            var Nnum = 'NEW' + num;
                            $(_this).parent().prev().append('<li class="weui-uploader__file"><img style="width: 79px;height: 79px;" src="'+ v +'" /><del num="'+ Nnum +'">&times;</del></li>');
                            wxuploadImage(gId, Nnum, v.toString());
                            num++;
                        })
                    }
                });
        });

        //预览图片
        $('div[name=uploader]').on('click', 'ul li img', function () {
            var currUrl = $(this).attr('src');
            wx.ready(function(){
                wx.previewImage({
                    current: currUrl,
                    urls: [ currUrl ]
                });
            });
        });

        //删除图片
        $('div[name=uploader]').on("click", "ul li del", function(){
            var _div = $(this).parents('div[name=uploader]'),
                gId = _div.attr('gId'),
                currNum = $(this).attr('num');

            //删除数组
            if(data[gId] && data[gId][currNum]){
                delete data[gId][currNum];
            } else {
                if(!data[gId]) data[gId] = [];
                data[gId][currNum] = 0;
            }
            $(this).parent().remove();
        })
    });

    //上传文件到wx服务器
    function wxuploadImage(gId, num, tempId) {
        console.log('上传ID' + tempId);
        wx.uploadImage({
            localId: tempId,
            isShowProgressTips: 0,
            success: function (res) {
                data[gId][num] = res.serverId
                console.log('上传成功：'+ res.serverId );
            },
            fail: function (error) {
                console.log('上传失败：'+ error.errMsg );
            }
        });
    }

    //认领
    function claim() {
        E.wxConfirm('确认认领该订单？', function () {
           E.ajax_post({
               url : "/wap/orderDtl.html?ajaxFlg=5&code=<!--{$tempInfo->tempCode}-->",
               call : function (o) {
                   E.wxAlert(o.message, function () {
                       if(o.code == 200){
                           //location.href = '/wap/order.html?flg=1';
                           location.reload();
                       }
                   } , 1)
               }
           });
       });
    }

    //制作完成
    function finish() {

        //检查图片
        var flg = 0;
        $('div[name=uploader]').each(function () {
            if(!$(this).find('img').length){
                flg = 1;
                return false;
            }
        });
        if(flg) {
            E.wxAlert('请上传系列图片');
            return;
        }

        E.wxConfirm('确认完成该订单？', function () {
            E.ajax_post({
                url : "/wap/orderDtl.html?ajaxFlg=6&code=<!--{$tempInfo->tempCode}-->",
                data: { files: data },
                call : function (o) {
                    E.wxAlert(o.message, function () {
                        if(o.code == 200){
                            //location.href = '/wap/order.html?flg=1';
                            location.reload();
                        }
                    } , 1)
                }
            });
        });
    }

    //收货
    function receipt() {
        E.wxConfirm('确认收货？', function () {
            E.ajax_post({
                url : "/wap/orderDtl.html?ajaxFlg=7&code=<!--{$tempInfo->tempCode}-->",
                call : function (o) {
                    E.wxAlert(o.message, function () {
                            if(o.code == 200){
                                //location.href = '/wap/order.html?flg=1';
                                location.reload();
                            }
                    } , 1)
                }
            });
        });
    }

</script>

</body>
</html>